<template>
	<wakin-list-temp ref="temp" empty-mode="data" page-num-key="pageNum" page-size-key="pageSize" :empty-icon="icon" :bottom-load-text="loadText" :custom-empty="false" :show-load-toast="showLoadToast"
		@loadData="getDatas" @loadStatus="loadStatus">
		<!--插槽:数据列表-->
		<view class="list" slot="render">
			<!--数据卡片-->
			<view class="list-item" v-for="(item, index) of list" :key="index" @tap="details(item)">
				<view class="title">{{item.title || "系统公告"}}</view>
				<view class="margin-top-sm">{{item.content}}</view>
				<view class="margin-top-sm text-gray">{{item.create_times}}</view>
			</view>
		</view>
		<!--插槽:自定义空提示-->
		<view class="empty" slot="empty">
			<u--image :src="icon" :width="700" :height="800"></u--image>
		</view>
	</wakin-list-temp>
</template>

<script>
	import {
		getMessageList as requestApi,
	} from '@/api/Interface/message'
	export default {
		name: 'MessageList',
		data() {
			return {
				list: [],
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '没有数据了'
				},
				showLoadToast: false, // 是否显示加载中toast
				listLoad: true, // 组件数据加载状态
				icon: this.$ListIcon.search,
				baseURL: this.$basic_config.baseUrl,
				MainColor: this.$MainColor,
			};
		},
		methods: {
			// 如果list中有需要格式化或操作的字段,则进行定制化操作
			getDatas(e, total, source) {
				this.list = e;
				this.$emit("total", total);
			},
			// 获取列表组件数据加载状态
			loadStatus(e) {
				this.listLoad = e;
			},
			// 连接列表通用子组件模版
			async loadDatas(loadType = this.$ListLoadEnum.load, search, debounce = false, time = 1000) {
				await this.$refs.temp.loadDatas({
					loadType,
					search,
					debounce,
					time,
					api: requestApi
				});
			},
			/**
			 * @description 返回item对象,组件类型key
			 */
			details(e) {
				this.$emit('clickItem', e);
			}
		}
	};
</script>

<style lang="less" scoped>
	.list-item {
		background-color: #ffffff;
		border-bottom: 1px solid #f8f8f8;
		padding: 30rpx;
	}

	.list-item:not(:last-child) {
		border-bottom: 1px solid #f8f8f8;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
	}
</style>
